<template>
  <el-dialog
    class="detailDialog"
    v-model="props.detailVisible"
    title="退还详情"
    width="55%"
    :close-on-click-modal="false"
    @close="close"
  >
    <div class="title">退还申请信息</div>
    <el-row class="row">
      <el-col :span="10">
        <div>备件申请单号：{{ props.detailForm?.refundNum }}</div>
      </el-col>
      <el-col :span="10">
        <div>
          工单信息：{{
            props.detailForm?.orderType == 1
              ? '维修工单'
              : props.detailForm?.orderType == 2
              ? '维保工单'
              : props.detailForm?.orderType == 3
              ? '点检工单'
              : ''
          }}-{{ props.detailForm?.applyNum }}
        </div>
      </el-col>
    </el-row>
    <el-row class="row">
      <el-col :span="10">
        <div>退还数量：{{ props.detailForm?.refundAmount }}</div>
      </el-col>
      <!-- <el-col :span="9">
        <div>备注信息：{{ props.detailForm?.remark }}</div>
      </el-col> -->
    </el-row>
    <el-row class="row">
      <el-col :span="10">
        <div>退还申请人：{{ props.detailForm?.refundUserName }}</div>
      </el-col>
      <el-col :span="10">
        <div>申请时间：{{ props.detailForm?.createTime }}</div>
      </el-col>
    </el-row>
    <div class="title">退还审批信息</div>
    <el-row class="row">
      <el-col :span="10">
        <div>
          处理结果：{{
            props.detailForm?.dealResult == 1
              ? '全部退还'
              : props.detailForm?.dealResult == 2
              ? '部分退还'
              : props.detailForm?.dealResult == 3
              ? '未退还'
              : ''
          }}
        </div>
      </el-col>
    </el-row>
    <el-row class="row">
      <el-col :span="24">
        <div>
          退还备件信息：(实际退还数量：{{
            props.detailForm?.totalAmount
          }}，退还备件价值：{{ props.detailForm?.refundFee }}元)
        </div>
      </el-col>
    </el-row>
    <el-row class="row">
      <el-col :span="10">
        <div>退还审批人：{{ props.detailForm?.dealUserName }}</div>
      </el-col>
      <el-col :span="10">
        <div>审核时间：{{ props.detailForm?.dealTime }}</div>
      </el-col>
    </el-row>
    <el-row class="row">
      <el-col :span="24">
        <div>备注：{{ props.detailForm?.remark }}</div>
      </el-col>
    </el-row>
    <div class="title">退还备件信息</div>
    <el-table
      :data="tableData"
      :span-method="objectSpanMethod"
      border
      style="width: 100%"
    >
      <el-table-column prop="partNum" label="备件编号" />
      <el-table-column prop="partName" label="备件名称" />
      <el-table-column prop="partTypeName" label="备件类型" />
      <el-table-column prop="amount" label="申请退还数量" width="160" />
      <el-table-column prop="price" label="单价(元)">
        <template #default="scope">
          <div>
            {{
              scope.row.price ? scope.row.price + '/' + scope.row.partUnit : '-'
            }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="batchNum" label="退还批次">
        <template #default="scope">
          <div>
            {{ scope.row.batchNum ? scope.row.batchNum : '-' }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="factAmount" label="实际退还数量" width="160" />
    </el-table>
  </el-dialog>
</template>
<script setup lang="ts">
import { ElMessage, SpanMethodProps } from 'element-plus'
import { ref, reactive, watch } from 'vue'
const props = defineProps({
  detailVisible: Boolean,
  detailForm: Object
})

const emit = defineEmits(['closeDetail'])
const close = () => {
  emit('closeDetail')
}

const tableData = ref<any>([])

watch(
  () => props.detailVisible,
  () => {
    if (props.detailVisible == true) {
      props.detailForm?.partDetailResponses.forEach((item: any) => {
        var b = tableData.value.length
        if (item.partRetrievalDetails.length == 0) {
          let obj = {
            partNum: item.partNum,
            partName: item.partName,
            partTypeName: item.partTypeName,
            partUnit: item.partUnit,
            rowNum: b,
            price: '',
            batchNum: '',
            factAmount: item.factAmount,
            amount: item.amount,
            num: 1
          }
          tableData.value.push(obj)
        } else {
          item.partRetrievalDetails.forEach((i: any) => {
            let obj = {
              partNum: item.partNum,
              partName: item.partName,
              partTypeName: item.partTypeName,
              partUnit: item.partUnit,
              rowNum: b,
              price: '',
              batchNum: '',
              factAmount: '',
              amount: item.amount,
              num: item.partRetrievalDetails.length
            }
            obj.price = i.price
            obj.batchNum = i.batchNum
            obj.factAmount = i.amount
            tableData.value.push(obj)
          })
        }
      })
    } else {
      tableData.value = []
    }
  }
)

const objectSpanMethod = ({
  row,
  column,
  rowIndex,
  columnIndex
}: SpanMethodProps) => {
  if (columnIndex < 5) {
    if (rowIndex === row.rowNum && row.num != 1) {
      return {
        rowspan: row.num,
        colspan: 1
      }
    }
    if (row.rowNum === 0 && rowIndex != 0 && rowIndex <= row.num - 1) {
      return {
        rowspan: 0,
        colspan: 0
      }
    }
    if (rowIndex > row.rowNum && rowIndex <= row.rowNum * row.num) {
      return {
        rowspan: 0,
        colspan: 0
      }
    }
  }
}
</script>
<style scoped lang="scss">
.detailDialog {
  .row {
    font-size: var(--el-font-size-base);
    margin-bottom: 8px;
  }

  .title {
    font-size: var(--el-font-size-base);
    font-weight: 700;
    margin-bottom: 10px;
  }
}

.pcInfo {
  margin-bottom: 8px;

  > span {
    margin-right: 16px;
    font-weight: 400;
    line-height: 22px;
  }
}
</style>
